/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component,Fragment} from 'react';
import {Form, Input, Radio, Select, Switch, InputNumber } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      level:1,
      mode:'1'
    };
  }
  componentDidMount() {
    if( this.props.editRecord){
      this.setState({
        level:Number( this.props.editRecord.level),
        mode: this.props.editRecord.mode.toString(),

      },function() {
        this.props.form.setFieldsValue({
          level:this.state.level.toString(),
          mode: this.props.editRecord.mode.toString()
        })
        if( this.props.editRecord.mode!==1){
          if(this.props.editRecord.level_one_consumption){
            this.props.form.setFieldsValue({
              level_one_consumption:this.props.editRecord.level_one_consumption*100
            })
          }
          if(this.props.editRecord.level_two_consumption){
            this.props.form.setFieldsValue({
              level_two_consumption:this.props.editRecord.level_two_consumption*100
            })
          }
          if(this.props.editRecord.level_three_consumption){
            this.props.form.setFieldsValue({
              level_three_consumption:this.props.editRecord.level_three_consumption*100
            })
          }
        }
      })

    }
  }

  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      }
    };
    const formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 10},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 14},
      }
    };
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               用水性质名称
            </span>
            )}
          >
            {getFieldDecorator('name', {
              initialValue: this.props.editRecord ? this.props.editRecord.name : '',
              rules: [{ required: true, message: '请输入用水性质名称' }],
            })(
              <Input />
            )}
          </FormItem>
         <Form.Item label="所属公司"
                     {...formItemLayoutWithLabel}
          >
            {getFieldDecorator('company_id', {
              initialValue:this.props.editRecord?this.props.editRecord.company_id:sessionStorage.getItem('company_id'),
               rules: [{ required: true, message: '请选择' }],
            })(
              <Select  disabled={Boolean(sessionStorage.getItem('company_id'))||this.props.editRecord}  placeholder="请选择">
                {
                  JSON.parse(sessionStorage.getItem('management_companies')).map((item,index)=>{
                    return <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  })
                }
              </Select>,
            )}
          </Form.Item>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               居民类型
            </span>
            )}
          >
            {getFieldDecorator('resident_type', {
              initialValue: this.props.editRecord ? this.props.editRecord.resident_type.toString() : '1',
              rules: [{ required: true, message: '请选择居民类型' }],
            })(
              <Select>
                {
                  [{key:'1',value:'居民'},{key:'2',value:'非居民'}].map((item,index)=>{
                    return <Option key={index} value={item.key}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               打印收据模板
            </span>
            )}
          >
            {getFieldDecorator('print_receipt_template', {
              initialValue: this.props.editRecord ? this.props.editRecord.print_receipt_template.toString() : '1',
              rules: [{ required: true, message: '请选择打印收据模板' }],
            })(
              <Select>
                {
                  [{key:'1',value:'打印模板1'}].map((item,index)=>{
                    return <Option key={index} value={item.key}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               阶梯计算模式
            </span>
            )}
          >
            {getFieldDecorator('mode', {
              initialValue: this.props.editRecord ? this.props.editRecord.mode.toString() : '1',
              rules: [{ required: true, message: '请选择打阶梯计算模式' }],
            })(
              <Select  onChange={(e)=>{
                this.setState({
                  mode:e
                })
              }}>
                {
                  [{key:'1',value:'按人口 (水量单位m³)'},{key:'2',value:'按基准用水量 (水量单位%)'},{key:'3',value:'按面积 (水量单位%)'}].map((item,index)=>{
                    return <Option key={index} value={item.key}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               阶梯数量
            </span>
            )}
          >
            {getFieldDecorator('level', {
              initialValue: this.props.editRecord ? this.props.editRecord.level.toString() : '1',
              rules: [{ required: true, message: '请选择阶梯数量' }],
            })(
              <Select  onChange={(e)=>{
                this.setState({
                  level:e
                })
              }}>
                {
                  [{key:'1',value:'1'},{key:'2',value:'2'},{key:'3',value:'3'},{key:'4',value:'4'}].map((item,index)=>{
                    return <Option key={index} value={item.key}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
            <Fragment>
              {
                this.state.level>=1&&
                <div>
                  <FormItem
                    style={{width:'50%',display:'inline-block'}}
                    {...formItemLayoutWithLabel2}
                    label={(
                      <span>
               一阶水价
            </span>
                    )}
                  >
                    {getFieldDecorator('level_one_price', {
                      initialValue: this.props.editRecord ? this.props.editRecord.level_one_price : '',
                      rules: [{ required: true, message: '一阶水价必填' }],
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                  <FormItem
                    style={{width:'50%',display:'inline-block'}}
                    {...formItemLayoutWithLabel2}
                    label={(
                      <span>
               一阶污水处理费
            </span>
                    )}
                  >
                    {getFieldDecorator('level_one_sewage_price', {
                      initialValue: this.props.editRecord ? this.props.editRecord.level_one_sewage_price : '0',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                </div>
              }
              {
                this.state.level >= 2 &&
                <div>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               二阶水价
            </span>
                    )}
                  >
                    {getFieldDecorator('level_two_price', {
                      rules: [{ required: true, message: '一阶水价必填' }],
                      initialValue: this.props.editRecord ? this.props.editRecord.level_two_price : '',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               二阶污水处理费
            </span>
                    )}
                  >
                    {getFieldDecorator('level_two_sewage_price', {

                      initialValue: this.props.editRecord ? this.props.editRecord.level_two_sewage_price : '0',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                </div>
              }
              {
                this.state.level >= 3 &&
                <div>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               三阶水价
            </span>
                    )}
                  >
                    {getFieldDecorator('level_three_price', {
                      rules: [{ required: true, message: '三阶水价必填' }],

                      initialValue: this.props.editRecord ? this.props.editRecord.level_three_price : '',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               三阶污水处理费
            </span>
                    )}
                  >
                    {getFieldDecorator('level_three_sewage_price', {
                      initialValue: this.props.editRecord ? this.props.editRecord.level_three_sewage_price : '0',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                </div>
              }
              {
                this.state.level >= 4 &&
                <div>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               四阶水价
            </span>
                    )}
                  >
                    {getFieldDecorator('level_four_price', {
                      rules: [{ required: true, message: '四阶水价必填' }],

                      initialValue: this.props.editRecord ? this.props.editRecord.level_four_price : '',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel2}  style={{width:'50%',display:'inline-block'}}
                    label={(
                      <span>
               四阶污水处理费
            </span>
                    )}
                  >
                    {getFieldDecorator('level_four_sewage_price', {
                      initialValue: this.props.editRecord ? this.props.editRecord.level_four_sewage_price : '0',
                    })(
                      <Input  addonBefore="￥" style={{width:'100%'}} />
                    )}
                  </FormItem>
                </div>
              }
            </Fragment>


          <Fragment>
            {
              this.state.level >= 2 && <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               一阶水量
            </span>
                )}
              >
                {getFieldDecorator('level_one_consumption', {
                  initialValue: this.props.editRecord ? this.props.editRecord.level_one_consumption : '',
                })(
                  <Input addonAfter={this.state.mode === '1' ? "m3" : '%'} style={{width: '100%'}}/>
                )}
              </FormItem>
            }
            {
              this.state.level >= 3 &&
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               二阶水量
            </span>
                )}
              >
                {getFieldDecorator('level_two_consumption', {
                  initialValue: this.props.editRecord ? this.props.editRecord.level_two_consumption : '',
                })(
                  <Input addonAfter={this.state.mode === '1' ? "m3" : '%'} style={{width: '100%'}}/>
                )}
              </FormItem>
            }
            {
              this.state.level >= 4 &&
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               三阶水量
            </span>
                )}
              >
                {getFieldDecorator('level_three_consumption', {
                  initialValue: this.props.editRecord ? this.props.editRecord.level_three_consumption : '',
                })(
                  <Input addonAfter={this.state.mode === '1' ? "m3" : '%'} style={{width: '100%'}}/>
                )}
              </FormItem>
            }
          </Fragment>
         <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               备注
            </span>
            )}
          >
            {getFieldDecorator('remark', {
              initialValue: this.props.editRecord ? this.props.editRecord.remark : '',
            })(
              <Input  style={{width:'100%'}} />
            )}
          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


